<!DOCTYPE html>
<html>
<head>
    <title>Electric Field Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Clear canvas with a white background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --- Styles ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        
        // --- Draw X-axis ---
        const yAxis = 175;
        const xAxisStart = 50;
        const xAxisEnd = 750;

        ctx.beginPath();
        ctx.moveTo(xAxisStart, yAxis);
        ctx.lineTo(xAxisEnd, yAxis);
        // Arrow on the right
        ctx.moveTo(xAxisEnd, yAxis);
        ctx.lineTo(xAxisEnd - 15, yAxis - 7);
        ctx.moveTo(xAxisEnd, yAxis);
        ctx.lineTo(xAxisEnd - 15, yAxis + 7);
        // Arrow on the left
        ctx.moveTo(xAxisStart, yAxis);
        ctx.lineTo(xAxisStart + 15, yAxis - 7);
        ctx.moveTo(xAxisStart, yAxis);
        ctx.lineTo(xAxisStart + 15, yAxis + 7);
        ctx.stroke();

        // Label +x
        ctx.font = 'bold 24px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('+x', xAxisEnd + 20, yAxis + 5);

        // --- Draw Charges ---
        const charge1X = 275;
        const charge2X = 575;
        const chargeRadius = 8;

        // Charge +3Q
        ctx.beginPath();
        ctx.arc(charge1X, yAxis, chargeRadius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.font = 'bold 28px sans-serif';
        ctx.fillText('+3Q', charge1X, yAxis + 40);

        // Charge -Q
        ctx.beginPath();
        ctx.arc(charge2X, yAxis, chargeRadius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('-Q', charge2X, yAxis + 40);

        // --- Draw Dashed Lines ---
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.lineWidth = 1.5;
        const dashLineTop = 100;
        const dashLineBottom = 250;

        // Line for charge 1
        ctx.beginPath();
        ctx.moveTo(charge1X, dashLineTop);
        ctx.lineTo(charge1X, dashLineBottom);
        ctx.stroke();

        // Line for charge 2
        ctx.beginPath();
        ctx.moveTo(charge2X, dashLineTop);
        ctx.lineTo(charge2X, dashLineBottom);
        ctx.stroke();
        ctx.restore();

        // --- Draw Region Labels ---
        ctx.font = 'bold 32px sans-serif';
        ctx.textAlign = 'center';
        const labelY = yAxis - 75;

        // Region I
        ctx.fillText('Region I', (xAxisStart + charge1X) / 2, labelY);

        // Region II
        ctx.fillText('Region II', (charge1X + charge2X) / 2, labelY);

        // Region III
        ctx.fillText('Region III', (charge2X + xAxisEnd) / 2, labelY);

    </script>
</body>
</html>